{{#accordion-list showExpandAll=false as | al expandFn |}}
  <div class="over-hr">
    <span>
      {{driverOptionsTitle}}
    </span>
  </div>

  

  {{#if (eq step 1)}}
    {{#accordion-list-item
      title=(t "nodeDriver.azure.access.title")
      detail=(t "nodeDriver.azure.access.detail")
      expandAll=expandAll
      expand=(action expandFn)
      expandOnInit=true
    }}
    {{form-auth-cloud-credential
      driverName=driverName
      parseAndCollectErrors=(action "errorHandler")
      primaryResource=primaryResource
      cloudCredentials=cloudCredentials
      createLabel="nodeDriver.amazonec2.access.next"
      region=config.location
      finishAndSelectCloudCredential=(action "finishAndSelectCloudCredential")
      progressStep=(action "initAzureData")
      cancel=(action "cancel")
    }}
    {{top-errors errors=errors}}
    {{/accordion-list-item}}
  {{/if}}
  

<div class="{{unless (gte step 2) "hide"}}">
  {{#accordion-list-item
     title=(t "nodeDriver.azure.placement.title")
     detail=(t "nodeDriver.azure.placement.detail")
     expandAll=expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    <div class="row">

      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.region.label"}}
        </label>
        {{#if regionsLoading}}
          <i class="icon icon-spinner icon-spin"></i>
        {{else}}
          {{new-select
          classNames="form-control"
          content=regions
          optionLabelPath="displayName"
          optionValuePath="name"
          value=config.location
        }}
          {{#if showVmSizeAvailabilityWarning}}
            {{#banner-message color="bg-error"}}
              <p>{{vmSizeAvailabilityWarning}}</p>
            {{/banner-message}}
          {{/if}}
        {{/if}}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "clusterNew.googlegke.serviceAccount.label"}}
        </label>
        {{searchable-select
          content=serviceAccountContent
          classNames="form-control"
          value=config.serviceAccount
          optionLabelPath="displayName"
          optionValuePath="uniqueId"
          readOnly=editing
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label" for="input-resource-group">
          {{t "nodeDriver.azure.resourceGroup.label"}}
        </label>
        {{input
          type="text"
          id="input-resource-group"
          value=config.resourceGroup
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.resourceGroup.placeholder")
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label" for="input-plan">
          {{t "nodeDriver.azure.plan.label"}}
        </label>
        {{input
          type="text"
          value=config.plan
          id="input-plan"
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.plan.placeholder")
        }}
      </div>
    </div>
    <div class="row">
       
        <div class="col span-6">
          <div class="radio">
            <label>
              {{radio-button
                selection=useAvailabilitySet
                value=true
              }}

               {{#tooltip-element
                  type="tooltip-basic"
                  model=(t "nodeDriver.azure.availabilitySet.description")
                  tooltipTemplate="tooltip-static"
                  aria-describedby="tooltip-base"
                  baseClass="text-left"
                }}
                <span>
                  {{t "nodeDriver.azure.availabilitySet.label" type=managedDisks }}
                  <i class="icon icon-help icon-blue"/>
                </span>
              {{/tooltip-element}}

              
            </label>
          </div>
          <div class="radio">
            <label>
              {{radio-button
                selection=useAvailabilitySet
                value=false
              }}
               {{#tooltip-element
                  type="tooltip-basic"
                  model=(t "nodeDriver.azure.availabilityZone.description")
                  tooltipTemplate="tooltip-static"
                  aria-describedby="tooltip-base"
                  baseClass="text-left"
                }}
                <span>
                  {{t "nodeDriver.azure.availabilityZone.label" }}
                  <i class="icon icon-help icon-blue"/>
                </span>
              {{/tooltip-element}}
            </label>
          </div>
        </div>

        {{#if (eq useAvailabilitySet true)}}
          <div class="col span-6">
            <label class="acc-label">
              {{t "nodeDriver.azure.availabilitySet.label" type=managedDisks}}
            </label>
            {{input
              type="text"
              value=config.availabilitySet
              classNames="form-control"
              placeholder=(t "nodeDriver.azure.availabilitySet.placeholder")
            }}
          </div>
        {{/if}}
        {{#if (eq useAvailabilitySet false)}}
          <div class="col span-6">
            <label class="acc-label">
              {{t "nodeDriver.azure.availabilityZone.label" }}
            </label>
            {{new-select
              classNames="form-control"
              content=availabilityZoneChoices
              optionLabelPath="name"
              optionValuePath="value"
              value=config.availabilityZone
              disabled=availabilityZonesAreUnavailable
            }}
            {{#if showVmSizeAvailabilityWarning}}
              {{#banner-message color="bg-error"}}
                <p>{{vmSizeAvailabilityWarning}}</p>
              {{/banner-message}}
            {{/if}}
            {{#if showVmAvailabilityZoneWarning}}
              {{#banner-message color="bg-error"}}
                <p>{{vmAvailabilityZoneWarning}}</p>
              {{/banner-message}}
            {{/if}}
          </div>
        {{/if}}
      </div>
     
      {{#if (eq useAvailabilitySet true)}}
      <hr/>
      <div class="row" >
          <h3>{{t "nodeDriver.azure.availabilitySet.sectionTitle" }}</h3>
          <div class="col span-6">
            <label class="acc-label" for="input-fault-domain-count">
              {{t "nodeDriver.azure.faultDomainCount.label"}}
            </label>
            {{input-number
              id="input-fault-domain-count"
              value=config.faultDomainCount
              min=1
              max=3
              classNames="form-control"
              placeholder=(t "nodeDriver.azure.faultDomainCount.placeholder")
            }}
            <p class="help-block">
              {{t "nodeDriver.azure.faultDomainCount.helpText"}}
            </p>
          </div>
          <div class="col span-6">
            <label class="acc-label" for="input-update-domain-count">
              {{t "nodeDriver.azure.updateDomainCount.label"}}
            </label>
            {{input-number
              id="input-update-domain-count"
              value=config.updateDomainCount
              min=1
              max=3
              classNames="form-control"
              placeholder=(t "nodeDriver.azure.updateDomainCount.placeholder")
            }}
            <p class="help-block">
              {{t "nodeDriver.azure.updateDomainCount.helpText"}}
            </p>
          </div>
      </div>
      {{/if}}
      
  {{/accordion-list-item}}

  {{#accordion-list-item
    title=(t "nodeDriver.azure.network.title")
    detail=(t "nodeDriver.azure.network.detail")
    expandAll=expandAll
    expand=(action expandFn)
    expandOnInit=true
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.subnet.label"}}
        </label>
        {{input
          type="text"
          value=config.subnet
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.subnet.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.subnetPrefix.label"}}
        </label>
        {{input
          type="text"
          value=config.subnetPrefix
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.subnetPrefix.placeholder")
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.vnet.label"}}
        </label>
        {{input
          type="text"
          value=config.vnet
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.vnet.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{#tooltip-element
            type="tooltip-basic"
            model=(t "nodeDriver.azure.staticPublicIp.tooltip")
            tooltipTemplate="tooltip-static"
            aria-describedby="tooltip-base"
            baseClass="text-left"
          }}
           <span>
            {{t "nodeDriver.azure.staticPublicIp.label"}}
            <i class="icon icon-help icon-blue"/>
          </span>
        {{/tooltip-element}}
        </label>
        {{new-select
          classNames="form-control"
          content=publicIpChoices
          optionLabelPath="name"
          optionValuePath="value"
          value=publicIpChoice
          disabled=config.availabilityZone
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.privateIpAddress.label"}}
        </label>
        {{input
          type="text"
          value=config.privateIpAddress
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.privateIpAddress.placeholder")
        }}
      </div>
      <div class="col span-3">
        <label class="acc-label">
          {{t "nodeDriver.azure.usePrivateIp.label"}}
        </label>
        <div>
          {{input
            type="checkbox"
            checked=config.usePrivateIp
            disabled=privateSet
          }}
        </div>
      </div>
      <div class="col span-3">
        <label class="acc-label">
          {{#tooltip-element
            type="tooltip-basic"
            model=(t "nodeDriver.azure.useStandardSKU.tooltip")
            tooltipTemplate="tooltip-static"
            aria-describedby="tooltip-base"
            baseClass="text-left"
          }}
           <span>
            {{t "nodeDriver.azure.useStandardSKU.label"}}
            <i class="icon icon-help icon-blue"/>
          </span>
        {{/tooltip-element}}
        </label>
        <div>
          {{input
            type="checkbox"
            checked=config.enablePublicIpStandardSku
            disabled=config.availabilityZone
          }}
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.nsg.label"}}
        </label>
        {{input
          type="text"
          value=config.nsg
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.nsg.placeholder")
        }}
        <p class="help-block">
          {{t "nodeDriver.azure.nsg.helpText"}}
        </p>
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{#tooltip-element
            type="tooltip-basic"
            model=(t "nodeDriver.azure.acceleratedNetworking.tooltip")
            tooltipTemplate="tooltip-static"
            aria-describedby="tooltip-base"
            baseClass="text-left"
          }}
           <span>
            {{t "nodeDriver.azure.acceleratedNetworking.label"}}
            <i class="icon icon-help icon-blue"/>
          </span>
        {{/tooltip-element}}
        </label>
        <div>
          {{input
            type="checkbox"
            checked=config.acceleratedNetworking
            disabled=(and (not config.acceleratedNetworking) (not selectedVmSizeSupportsAN))
          }}
        </div>
        {{#if showVmSizeAcceleratedNetworkingWarning}}
          {{#banner-message color="bg-error"}}
            <p>{{vmSizeAcceleratedNetworkingWarning}}</p>
          {{/banner-message}}
        {{/if}}
      </div>
    </div>
  {{/accordion-list-item}}

  {{#accordion-list-item
    title=(t "nodeDriver.azure.instance.title")
    detail=(t "nodeDriver.azure.instance.detail")
    expandAll=expandAll
    expand=(action expandFn)
    expandOnInit=true
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.image.label"}}
        </label>
        {{input
          type="text"
          value=config.image
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.image.placeholder")
        }}
        <p class="help-block">
          {{t "nodeDriver.azure.image.helpText"}}
        </p>
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.size.label"}}
        </label>
        {{#if vmSizesLoading}}
          <i class="icon icon-spinner icon-spin"></i>
        {{else}}
          {{new-select
            classNames="form-control"
            content=sizeChoices
            optionLabelPath="value"
            optionGroupPath="group"
            value=config.size
          }}
          {{#if showVmAvailabilityZoneWarning}}
            {{#banner-message color="bg-error"}}
              <p>{{vmAvailabilityZoneWarning}}</p>
            {{/banner-message}}
          {{/if}}
          {{#if showVmSizeAcceleratedNetworkingWarning}}
            {{#banner-message color="bg-error"}}
              <p>{{vmSizeAcceleratedNetworkingWarning}}</p>
            {{/banner-message}}
          {{/if}}

        {{/if}}
        
    
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.dockerPort.label"}}
        </label>
        {{input
          type="text"
          value=config.dockerPort
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.dockerPort.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.openPort.label"}}
        </label>
        {{input
          type="text"
          value=openPorts
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.openPort.placeholder")
        }}
        {{#if (gt config.nsg.length 0)}}
          <p class="help-block">
            {{t "nodeDriver.azure.nsg.openPorts"}}
          </p>
        {{/if}}

      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.sshUser.label"}}
        </label>
        {{input
          type="text"
          value=config.sshUser
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.sshUser.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.storageType.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=storageTypeChoices
          optionLabelPath="name"
          optionValuePath="value"
          value=config.storageType
        }}
        {{#if (and (eq config.storageType 'StandardSSD_LRS') (eq managedDisks 'unmanaged'))}}
          {{#banner-message color="bg-error"}}
          <p>{{t 'nodeDriver.azure.managedDisks.warning'}}</p>
          {{/banner-message}}
        {{/if}}
        
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{#tooltip-element
            type="tooltip-basic"
            model=(t "nodeDriver.azure.managedDisks.tooltip")
            tooltipTemplate="tooltip-static"
            aria-describedby="tooltip-base"
            baseClass="text-left"
          }}
           <span>
            {{t "nodeDriver.azure.managedDisks.label"}}
            <i class="icon icon-help icon-blue"/>
          </span>
        {{/tooltip-element}}
        </label>
        {{new-select
          classNames="form-control"
          content=diskChoices
          localizedLabel=true
          value=managedDisks
          disabled=config.availabilityZone
        }}
        <p class="help-block">
          {{t "nodeDriver.azure.managedDisks.helpText" type=managedDisks}}
        </p>
      </div>

      <div class="col span-6">
        <label class="acc-label" for="input-disk-size">
          {{t "nodeDriver.azure.diskSize.label"}}
        </label>
        {{input-number
          value=config.diskSize
          id="input-disk-size"
          min=1
          max=32767
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.diskSize.placeholder")
        }}
      </div>
    </div>
    <div class="row">
      <div class="col span-12">
        {{form-key-value
        addActionLabel="nodeDriver.azure.tags.addActionLabel"
        initialMap=tags
        changed=(action (mut tags))
        }}
      </div>
    </div>
  {{/accordion-list-item}}

  <div class="over-hr">
    <span>
      {{templateOptionsTitle}}
    </span>
  </div>

  {{form-name-description
    model=model
    nameRequired=true
    rowClass="row mb-10"
  }}

  {{form-user-labels
    initialLabels=labelResource.labels
    setLabels=(action "setLabels")
    expand=(action expandFn)
  }}

  {{form-node-taints
    model=model
    expand=(action expandFn)
  }}

  {{form-engine-opts
    machine=model
    showEngineUrl=showEngineUrl
  }}

  {{top-errors
    errors=errors
  }}

  {{save-cancel
    save=(action "save")
    cancel=(action "cancel")
    editing=editing
  }}
  </div>
{{/accordion-list}}
